<template>
	<div class="msgDetail">
		<u-navbar title="系统公告" height="150rpx" @rightClick="rightClick" :autoBack="true" rightText="+" rightColor="#528efe"
			leftIconColor="#528efe">
		</u-navbar>
		<div class="qpnos"></div>
		<div v-for="items in data_ti" :key="items.id" class="detail_item"
			>
			<div class="top">

				<div class="detaLeft">
					<span class="nosre"></span>
					
				</div>
				<div class="detaCon">
					<p class="p">{{items.infomation}}</p>
					<!-- <p class="p2">{{items.details}}</p> -->
					
				</div>
				<div class="detaRight">
					<span class="hs1"></span>&nbsp;&nbsp;&nbsp;已读
				</div>
			</div>
			<div class="con">
				{{items.details}}
			</div>
			<div class="bot">
				<div class="left">
					<img src="../../static/tixk/xnxitixk/shijian.png" alt="" class="img" />
				<p class="p1">{{items.info_time}}</p>
				</div>
				<div class="right" @click="godetails(items)">阅读原文<u-icon name="arrow-right" color="#999999" size="15"></u-icon></div>
			</div>
		</div>
		<div v-for="items in data_wu" :key="items.id" class="detail_item">
			<div class="top">
			
				<div class="detaLeft">
					<span class="nosre"></span>
					
				</div>
				<div class="detaCon">
					<p class="p">{{items.infomation}}</p>
					<!-- <p class="p2">{{items.details}}</p> -->
					
				</div>
				<div class="detaRight">
					
				</div>
			</div>
			<div class="con">
				{{items.details}}
			</div>
			<div class="bot">
				<div class="left">
					<img src="../../static/tixk/xnxitixk/shijian.png" alt="" class="img" />
				<p class="p1">{{items.info_time}}</p>
				</div>
				<div class="right">阅读原文<u-icon name="arrow-right" color="#999999" size="15"></u-icon></div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		onLoad(option) {
			const {
				detail
			} = option
			// console.log(detail)
			const res = JSON.parse(detail)
			console.log(res, '我是res')
			res.forEach(item => {
				if (item.info_types === 'male') {
					this.data_ti.push(item)
				} else {
					this.data_wu.push(item)
				}
			})

			console.log('我是ti', this.data_ti)
			console.log('我是wu', this.data_wu)
		},
		data() {
			return {
				data_ti: [], // 初始计数值为0
				data_wu: [], // 初始计数值为0

			};
		},
		methods: {
			rightClick() {
				console.log('rightClick');
				uni.navigateTo({
					url:'/pages/message/zgerf/zgerf'
				})
			},
			godetails(items){
				console.log("我是详情",items)
				uni.navigateTo({
					url:`/pages/message/xitsgsgc/detailsnos/detailsnos?data=${JSON.stringify(items)}`
				})
			}

		}
	}
</script>

<style scoped lang="scss">
	.qpnos{
		width: 100%;
		height: 150rpx;
	}
	.nosre {
		background-color: #0079fe;
		display: inline-block;
		width: 15rpx;
		height: 40rpx;
	}

	.msgDetail {
		width: 100%;
		height: 100%;
		background-color: #f9f9f9;
		box-sizing: border-box;
		// padding: 40rpx 20rpx;
		font-size: 25rpx;

		.detail_item {
			background-color: white;
			// display: flex;
			margin-bottom: 10px;
			// align-items: center;
			// padding: 60rpx 0rpx;
			// height: 150rpx;
			// background-color: #ddd;
			box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
			padding: 0px 30rpx;

			.top {
				width: 100%;
				height: 100rpx;
				// background-color: saddlebrown;
				display: flex;
				align-items: center;
				.detaLeft {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-evenly;
					margin-right: 10rpx;
				}

				.detaCon {
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;

					// align-items: center;
					.p {
						font-weight: 700;
					}

					.p1 {
						color: #dbd0cc;
					}
				}

				.detaRight {
					flex: 1;
					text-align: right;
					padding-top: 40rpx;

					.hs1 {
						background-color: #4bd863;
						width: 15rpx;
						height: 15rpx;
						display: inline-block;
						border-radius: 15rpx;
					}
				}

				.img {
					width: 30rpx;
					height: 30rpx;
				}
			}
			.con{
				width: 100%;
				line-height: 40rpx;
				font-size: 30rpx;
			}
			.bot {
				width: 100%;
				// height: 100rpx;
				border-top: 1rpx solid #f2f2f2;
				// background-color: saddlebrown;
				display: flex;
				height: 80rpx;
				justify-content: space-between;
				color: #999999;
				align-items: center;
				.left{
					display: flex;
				}
				.right{
					display: flex;
				}
				.img {
					width: 30rpx;
					height: 30rpx;
				}
			}

		}
	}
</style>